<template>
  <div id="" class="p10 bgWhite">
    <headerbox :headerTitle="'选择充值方式'" :hasBack='true'></headerbox>
    <p class="mb10 lightColor">支付方式</p>
    <ul class="payType">
      <li v-for="(payType,index) in payTypeArr" :key="payType.key"
      @click="choosePaytype(index)">
        <span>
          <img :src="payType.typeIcon" alt="">
           {{payType.typeName}}
        </span>
        <img src="@/assets/myWallet/selected_icon.png" alt="" v-if="payType.isPay==1"><!-- 选中 -->
        <img src="@/assets/myWallet/unselected_icon.png" alt="" v-else>
      </li>
    </ul>
    <div class="fixedButtom">
      <button type="button" name="button" class="blockButton" @click="payMent()">确定支付</button>
    </div>
  </div>
</template>
<script>
import { wxPay,aliPay } from '@/utils/ajaxRequest.js';
export default {
  name: "",
  data: () => ({
    payTypeArr:[{
      typeName:'支付宝支付',
      typeIcon:require('@/assets/myWallet/alipay_icon.png'),
      isPay:1,
    },{
      typeName:'微信支付',
      typeIcon:require('@/assets/myWallet/wechat_icon.png'),
      isPay:0,
    }],
    idx:0,    //支付方式
    orderId:'',     //订单id
  }),
  methods: {
    choosePaytype(index) {      //选中充值方式
      this.payTypeArr.forEach(item=>item.isPay=0);
      this.payTypeArr[index].isPay = 1;
      this.idx = index;
    },
    // 确定支付
    payMent() {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      let payParam = {
        token:xlyd_loginInfo.token,
        orderType:1,    //0:参加赛事   1需求服务
        orderId:self.orderId,     //订单主键
      }
      switch (this.idx) {
        case 0:   //选择支付宝
          aliPay(payParam).then(res=>{
            console.log(res);
          })
          break;
        case 1:   //选择微信
          wxPay(payParam).then(res=>{
            console.log(res);
          })
          break;
        default:

      }
    }
  },
  mounted() {
    //do something after mounting vue instance
    let orderId = this.$route.query.orderId;
    this.orderId = orderId;
  }
}
</script>
<style lang="scss" scoped>
.lightColor{
  color: $lightColor;
}
.payType{
  margin-bottom: 50px;
  li{
    @include flex;
    justify-content: space-between;
    border-bottom: 1px solid $boxBgcolor;
    height: 50px;
    img{
      width: 20px;
    }
  }
}
</style>
